<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>测试历史 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .fade-in { animation: fadeIn .3s ease-in; }
            @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <main class="flex-1 pt-5 pb-24 px-4 relative">
        <div class="fixed inset-0 w-full h-full" style="background: linear-gradient(135deg, #FDCFE8 0%, #E4C1F9 50%, #BDE0FE 100%); z-index: -1;"></div>

        <div class="container mx-auto max-w-md relative z-10">
            <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-5 mb-4 border border-white/50">
                <div class="flex items-center justify-between">
                    <h1 class="text-lg font-bold">测试历史</h1>
                    <button id="clear-history" class="text-xs px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-200">清空</button>
                </div>
            </div>

            <div id="history-list" class="space-y-3"></div>
        </div>
    </main>

    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab" onclick="location.href='index.html'">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab" onclick="location.href='index.html#fortune-tab'">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab" onclick="location.href='index.html#profile-tab'">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        function loadHistory() {
            const listEl = document.getElementById('history-list');
            listEl.innerHTML = '';
            let items = [];
            try { items = JSON.parse(localStorage.getItem('test_history') || '[]'); } catch(e) {}
            if (!Array.isArray(items) || items.length === 0) {
                listEl.innerHTML = '<div class="text-center text-sm text-gray-500">暂无历史记录</div>';
                return;
            }
            items.sort((a,b) => (b.at||0) - (a.at||0));
            items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'bg-white rounded-xl shadow-sm p-4 border border-gray-100 fade-in';
                div.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-full flex items-center justify-center ${item.colorClass||'bg-gray-100'} text-white"><i class="fa ${item.icon||'fa-check'}"></i></div>
                            <div>
                                <div class="text-sm font-semibold">${item.title||'测试'}</div>
                                <div class="text-xs text-gray-500">${new Date(item.at||Date.now()).toLocaleString()}</div>
                            </div>
                        </div>
                        <div class="text-right">
                            ${typeof item.score === 'number' ? `<div class='text-sm font-bold text-primary'>${item.score}%</div>` : ''}
                            ${item.brief ? `<div class='text-xs text-gray-500 mt-1 line-clamp-1'>${item.brief}</div>` : ''}
                        </div>
                    </div>`;
                listEl.appendChild(div);
            });
        }

        document.getElementById('clear-history').addEventListener('click', () => {
            if (!confirm('确定要清空历史吗？')) return;
            localStorage.removeItem('test_history');
            loadHistory();
        });

        function ready(fn){ if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',fn)}else{fn()} }
        ready(loadHistory);
    </script>
</body>
</html>


